<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        class="w-100"
        v-model="queryForm.keyword"
        placeholder="关键字搜索"
      />
      <el-button type="primary" :icon="Search" @click="handleSearch"
        >搜索</el-button
      >
      <el-button class="green-button" :icon="Plus" @click="addProduct"
        >增加</el-button
      >
      <el-button class="green-button" :icon="Plus" @click="refreshTableInfo"
        >刷新</el-button
      >
      <!-- 批量删除按钮 -->
      <el-button
        type="danger"
        :icon="Delete"
        @click="batchDelete"
        :disabled="selectedRows.length === 0"
      >
        批量删除 ({{ selectedRows.length }})
      </el-button>
      <!-- 批量上传按钮 -->
      <el-button type="success" :icon="Upload" @click="showUploadDialog = true">
        批量上传
      </el-button>
    </div>
    <div class="table-con">
      <!-- 批量操作提示 -->
      <div v-if="selectedRows.length > 0" class="batch-tip">
        已选择 {{ selectedRows.length }} 个商品待删除
        <el-button type="primary" link @click="clearSelection"
          >清除选择</el-button
        >
      </div>

      <el-table
        ref="tableRef"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        @row-contextmenu="handleRowContextmenu"
        @selection-change="handleSelectionChange"
        border
      >
        <!-- 多选列 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="pName" label="商品名称" min-width="150">
          <template #default="scope">
            <div class="product-name">
              <span class="name">{{ scope.row.pName }}</span>
              <el-tag
                v-if="scope.row.pType"
                size="small"
                type="info"
                class="type-tag"
              >
                {{ scope.row.pType }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="商品分类" />
        <!-- 商品图片可能有多张 -->
        <el-table-column prop="pImgUrl" label="商品图片" width="120">
          <template #default="scope">
            <div class="image-container">
              <template v-if="scope.row.pImgUrl">
                <el-image
                  v-for="(url, index) in scope.row.pImgUrl
                    .split(',')
                    .slice(0, 1)"
                  :key="index"
                  :src="`${VITE_BASE_URL}${url.trim()}`"
                  style="width: 50px; height: 50px; margin-right: 5px"
                  fit="cover"
                  :preview-src-list="
                    scope.row.pImgUrl
                      .split(',')
                      .map((url: string) => `${VITE_BASE_URL}${url.trim()}`)
                  "
                  preview-teleported
                ></el-image>
                <span
                  v-if="scope.row.pImgUrl.split(',').length > 3"
                  class="more-images"
                >
                  +{{ scope.row.pImgUrl.split(",").length - 3 }}
                </span>
              </template>
              <span v-else class="no-image">无图片</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pBrand" label="商品品牌" />
        <el-table-column prop="pType" label="商品型号" />
        <el-table-column prop="pSpecifications" label="商品规格" />
        <el-table-column prop="pPrice" label="商品价格" />
        <!-- 有可能需要做tips -->
        <el-table-column prop="pNumber" label="商品数量" />
        <el-table-column prop="deliveryDays" label="交货时间" />
        <el-table-column prop="pIntroduce" label="商品简介" />
        <el-table-column prop="pLink" label="商品链接" show-overflow-tooltip>
          <template #default="scope">
            <a
              :href="scope.row.pLink"
              target="_blank"
              style="text-decoration: none"
            >
              {{ scope.row.pLink }}
            </a>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="editProduct(scope.row)"
              >修改</el-button
            >
            <el-button
              link
              size="small"
              class="mt-3 mb-3"
              @click="singleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      v-model:page="pagination.page"
      v-model:size="pagination.pageSize"
      :total="total"
      @pagination="getTableData"
    />
    <div>
      <context-menu v-model:show="show" :options="optionsComponent">
        <context-menu-item label="操作1" @click="onMenuClick(1)" />
        <context-menu-group label="操作2">
          <context-menu-item label="Item1" @click="onMenuClick(2)" />
          <context-menu-item label="Item2" @click="onMenuClick(3)" />
          <context-menu-group label="Child with v-for 8">
            <context-menu-item
              v-for="index of 6"
              :key="index"
              :label="'Item3-' + index"
              @click="onLoopMenuClick(index)"
            />
          </context-menu-group>
        </context-menu-group>
        <context-menu-item label="刷新" @click="onMenuClick(1)">
          <template #icon>
            <Refresh style="width: 1em; height: 1em; margin-right: 8px" />
          </template>
        </context-menu-item>
        <context-menu-item label="删除" @click="onMenuClick(1)">
          <template #icon>
            <Delete style="width: 1em; height: 1em; margin-right: 8px" />
          </template>
        </context-menu-item>
      </context-menu>
    </div>
    <AddEdit
      :title="title"
      :visible="showDialog"
      :formData="formData"
      @saveSubmit="saveSubmit"
      @update:visible="showDialog = $event"
    ></AddEdit>

    <!-- 批量上传对话框 -->
    <el-dialog
      v-model="showUploadDialog"
      title="批量上传商品"
      width="500px"
      :before-close="handleUploadDialogClose"
    >
      <div class="upload-container">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          drag
          :auto-upload="false"
          :before-upload="beforeUpload"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          :file-list="fileList"
          accept=".xlsx,.xls"
          multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              支持 .xlsx, .xls 格式文件，请按照模板格式填写数据<br />
              <strong>图片URL字段支持多个URL，用英文逗号分隔</strong>
            </div>
          </template>
        </el-upload>

        <div class="template-download">
          <el-button type="primary" link @click="downloadTemplate">
            <el-icon><Download /></el-icon>
            下载模板
          </el-button>
          <el-button
            type="info"
            link
            @click="debugFileList"
            style="margin-left: 10px"
          >
            调试文件列表
          </el-button>
        </div>

        <!-- 重复处理选项 -->
        <el-divider content-position="left">
          <span style="color: #409eff; font-weight: bold"
            >重复产品处理方式</span
          >
        </el-divider>

        <el-radio-group v-model="duplicateHandling" class="duplicate-options">
          <el-radio label="error">报错（默认）</el-radio>
          <el-radio label="skip">跳过重复产品</el-radio>
          <el-radio label="update">更新现有产品</el-radio>
        </el-radio-group>

        <div class="duplicate-help">
          <el-alert
            :title="getDuplicateHelpText()"
            type="info"
            :closable="false"
            show-icon
          />
        </div>

        <!-- 图片批量上传区域 -->
        <el-divider content-position="left">
          <span style="color: #409eff; font-weight: bold"
            >图片批量上传（可选）</span
          >
        </el-divider>

        <div class="batch-image-upload">
          <el-upload
            ref="batchImageUploadRef"
            class="batch-image-upload-demo"
            drag
            :auto-upload="false"
            :file-list="batchImageFileList"
            list-type="picture"
            multiple
            accept="image/*"
            :on-change="handleBatchImageChange"
            :on-remove="handleBatchImageRemove"
            :limit="20"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              批量上传商品图片<br />
              <small>上传后可在Excel中引用生成的URL</small>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持JPG/PNG格式，最多20张图片，上传后会生成URL列表供Excel使用
              </div>
            </template>
          </el-upload>

          <div v-if="batchUploadedImageUrls.length > 0" class="uploaded-urls">
            <h4>已上传的图片URL（复制到Excel中使用）：</h4>
            <el-input
              v-model="batchImageUrlString"
              type="textarea"
              :rows="4"
              placeholder="图片URL列表..."
              readonly
            >
              <template #append>
                <el-button @click="copyImageUrls" type="primary"
                  >复制</el-button
                >
              </template>
            </el-input>
            <p class="url-tip">
              💡 可以复制单个URL或多个URL（用逗号分隔）到Excel的"图片URL"列中
            </p>
          </div>

          <div class="batch-image-actions" style="margin-top: 10px">
            <el-button
              type="success"
              @click="uploadBatchImages"
              :loading="batchImageUploading"
              :disabled="batchImageFileList.length === 0 || batchImageDisabled"
            >
              上传所有图片
            </el-button>
            <el-button @click="clearBatchImages">清空图片</el-button>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showUploadDialog = false">取消</el-button>
          <el-button
            type="primary"
            @click="submitUpload"
            :loading="uploadLoading"
          >
            开始上传
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  Search,
  Plus,
  Delete,
  Upload,
  Download,
  UploadFilled,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTable } from "@/hooks/useTable";
import tableApi from "@/api/table";
import productApi from "@/api/product";
import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
//导入组件右键菜单组件
// import {
//   ContextMenu,
//   ContextMenuGroup,
//   ContextMenuItem,
// } from "@imengyu/vue3-context-menu";
import type { MenuOptions } from "@imengyu/vue3-context-menu";
import AddEdit from "@/components/addEditDialog/product/Index.vue";
import { cloneDeep } from "lodash";
//h5-url
const VITE_BASE_URL = import.meta.env.VITE_BASE_URL;

let title = ref("新增");
const queryForm = reactive({
  keyword: "",
});

// 批量操作相关
const selectedRows = ref<any[]>([]);
const showUploadDialog = ref(false);
const uploadLoading = ref(false);
const fileList = ref<any[]>([]);
const uploadRef = ref();
const tableRef = ref();

// 批量图片上传相关
const batchImageFileList = ref<any[]>([]);
const batchImageUploadRef = ref();
const batchImageUploading = ref(false);
const batchUploadedImageUrls = ref<string[]>([]);
const batchImageUrlString = ref("");
const batchImageDisabled = ref(false);

// 重复产品处理方式
const duplicateHandling = ref("error");

// 上传相关配置已移除，现在使用API调用方式

const {
  tableData,
  pagination,
  total,
  loading,
  getTableData,
  handleSearch, //搜索
  refreshTableInfo, //刷新
} = useTable(tableApi.productTableList, queryForm);

let formData = reactive({
  // nickName:"",
  // unit:"",
  // researchGroup:"",
  // phone:"",
  // address:"",
});
let show = ref(false);
const optionsComponent: MenuOptions = reactive({
  zIndex: 3,
  minWidth: 230,
  x: 500,
  y: 200,
});
let showDialog = ref(false);

// 处理多选变化
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection;
};

// 清除选择
const clearSelection = () => {
  selectedRows.value = [];
  // 清除表格选择状态
  if (tableRef.value) {
    tableRef.value.clearSelection();
  }
};

// 批量删除
const batchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的商品");
    return;
  }

  try {
    await ElMessageBox.confirm(
      `确认删除选中的 ${selectedRows.value.length} 个商品吗？此操作不可逆！`,
      "批量删除确认",
      {
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "el-button--danger",
      }
    );

    // 验证选中的商品是否有有效ID
    const invalidRows = selectedRows.value.filter(
      (row) => !row.id || typeof row.id !== "string"
    );
    if (invalidRows.length > 0) {
      ElMessage.error("选中的商品中包含无效数据，请刷新页面后重试");
      return;
    }

    const ids = selectedRows.value.map((row) => row.id);

    const res: any = await productApi.batchDeleteProducts({ ids });

    if (res.data && res.data.ok) {
      const deletedCount = res.data?.data?.deletedCount || 0;
      const deletedCartItems = res.data?.data?.deletedCartItems || 0;

      let message =
        res.data.message || `批量删除成功，共删除 ${deletedCount} 个商品`;
      if (deletedCartItems > 0) {
        message += `，同时清理了 ${deletedCartItems} 个购物车记录`;
      }

      ElMessage.success(message);
      clearSelection();
      refreshTableInfo();
    } else {
      const errorMsg = res.data?.message || res.msg || "批量删除失败";
      ElMessage.error(`批量删除失败: ${errorMsg}`);
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("批量删除失败，请重试");
    }
  }
};

// 删除重复的downloadTemplate函数，使用后面定义的版本

// 上传前验证
const beforeUpload = (file: File) => {
  const isValidType = [
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    "application/vnd.ms-excel",
  ].includes(file.type);
  const isLt10M = file.size / 1024 / 1024 < 10;

  if (!isValidType) {
    ElMessage.error("只能上传 Excel 文件!");
    return false;
  }
  if (!isLt10M) {
    ElMessage.error("文件大小不能超过 10MB!");
    return false;
  }

  // 简化文件重复检查，只在控制台提示
  const existingFile = fileList.value.find((f) => f.name === file.name);
  if (existingFile) {
  }

  return true;
};

// 旧的上传成功和失败回调已移除，现在在submitUpload中统一处理

// 提交上传
const submitUpload = async () => {
  if (fileList.value.length === 0) {
    ElMessage.warning("请选择要上传的文件");
    return;
  }

  uploadLoading.value = true;

  try {
    // 创建FormData对象
    const formData = new FormData();

    // 添加文件到FormData
    fileList.value.forEach((fileItem) => {
      if (fileItem.raw) {
        formData.append("file", fileItem.raw);
      }
    });

    // 添加重复处理选项
    if (duplicateHandling.value === "skip") {
      formData.append("skipDuplicates", "true");
    } else if (duplicateHandling.value === "update") {
      formData.append("updateDuplicates", "true");
    }

    // 调用上传API
    const res: any = await productApi.batchUploadProducts(formData);

    if (res.data && res.data.ok) {
      // 上传成功
      ElMessage.success(res.data.message || "文件上传成功");

      // 显示上传结果详情
      if (res.data.data) {
        const { successCount, errorCount, totalCount, errors } = res.data.data;

        let message = `批量导入完成：总计${totalCount}个，成功${successCount}个，失败${errorCount}个`;

        if (errorCount > 0 && errors && errors.length > 0) {
          message += "\n\n失败详情：\n";
          errors.slice(0, 5).forEach((error: any) => {
            message += `第${error.index || error.row}行: ${error.error}\n`;
          });
          if (errors.length > 5) {
            message += `...还有${errors.length - 5}个错误`;
          }
        }

        ElMessageBox.alert(message, "上传结果", {
          confirmButtonText: "确定",
          type: errorCount > 0 ? "warning" : "success",
        });
      }

      // 关闭对话框并刷新表格
      showUploadDialog.value = false;
      refreshTableInfo();
    } else {
      // 上传失败
      ElMessage.error(res.data?.message || res.message || "文件上传失败");
    }
  } catch (error: any) {
    console.error("上传失败:", error);
    const errorMessage =
      error?.response?.data?.message || error?.message || "文件上传失败";
    ElMessage.error(errorMessage);
  } finally {
    uploadLoading.value = false;
  }
};

// 文件变化处理
const handleFileChange = (file: any, uploadFileList: any[]) => {
  // 更新fileList
  fileList.value = uploadFileList;
};

// 文件移除处理
const handleFileRemove = (file: any, uploadFileList: any[]) => {
  // 更新fileList
  fileList.value = uploadFileList;
};

// 调试文件列表
const debugFileList = () => {
  ElMessage.info(`当前文件列表长度: ${fileList.value.length}`);
};

// 下载模板
const downloadTemplate = async () => {
  try {
    const res: any = await productApi.downloadTemplate();

    // 创建下载链接
    const blob = new Blob([res], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });

    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = downloadUrl;
    link.download = "商品导入模板.xlsx";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);

    ElMessage.success("模板下载成功");
  } catch (error) {
    console.error("下载模板失败:", error);
    ElMessage.error("下载模板失败，请重试");
  }
};

// 关闭上传对话框
const handleUploadDialogClose = () => {
  showUploadDialog.value = false;
  fileList.value = [];
  uploadLoading.value = false;
  // 清理批量图片上传相关数据
  batchImageFileList.value = [];
  batchUploadedImageUrls.value = [];
  batchImageUrlString.value = "";
  batchImageUploading.value = false;
};

// 批量图片上传相关方法
const handleBatchImageChange = (file: any, uploadFileList: any[]) => {
  batchImageFileList.value = uploadFileList;
};

const handleBatchImageRemove = (file: any, uploadFileList: any[]) => {
  batchImageFileList.value = uploadFileList;
};

const uploadBatchImages = async () => {
  if (batchImageFileList.value.length === 0) {
    ElMessage.warning("请选择要上传的图片");
    return;
  }

  batchImageUploading.value = true;

  try {
    const formData = new FormData();

    // 添加所有图片文件
    batchImageFileList.value.forEach((fileItem) => {
      if (fileItem.raw) {
        formData.append("files", fileItem.raw);
      }
    });

    const res: any = await productApi.batchFileUpload(formData);
    console.log("res", res);
    if (res.data.ok && res.data.data) {
      batchUploadedImageUrls.value = res.data.data.urls || [];
      batchImageUrlString.value = res.data.data.urlString || "";

      ElMessage.success(`成功上传${res.data.data.uploadedCount || 0}张图片`);
      batchImageDisabled.value = true;
    } else {
      ElMessage.error(res.message || "批量图片上传失败");
    }
  } catch (error) {
    ElMessage.error("批量图片上传失败");
  } finally {
    batchImageUploading.value = false;
  }
};

const clearBatchImages = () => {
  batchImageFileList.value = [];
  batchUploadedImageUrls.value = [];
  batchImageUrlString.value = "";
  batchImageDisabled.value = false;
  ElMessage.info("已清空图片列表");
};

const copyImageUrls = async () => {
  try {
    if (batchImageUrlString.value) {
      await navigator.clipboard.writeText(batchImageUrlString.value);
      ElMessage.success("图片URL已复制到剪贴板");
    } else {
      ElMessage.warning("没有可复制的URL");
    }
  } catch (error) {
    ElMessage.error("复制失败，请手动复制");
  }
};

// 获取重复处理方式的帮助文本
const getDuplicateHelpText = () => {
  switch (duplicateHandling.value) {
    case "skip":
      return "跳过模式：遇到重复的产品名称+品牌+型号+规格组合时，直接跳过该行，不导入也不报错";
    case "update":
      return "更新模式：遇到重复的产品名称+品牌+型号+规格组合时，用Excel中的数据更新现有产品的其他信息";
    default:
      return "报错模式：遇到重复的产品名称+品牌+型号+规格组合时，停止导入并报告错误";
  }
};

const handleRowContextmenu = (row: any, column: any, event: any) => {
  event.preventDefault();
  show.value = true;
  optionsComponent.x = event.clientX;
  optionsComponent.y = event.clientY;
};
const onMenuClick = (num: number) => {};
const editProduct = (row: any) => {
  showDialog.value = true;
  title.value = "编辑";
  const { isActive, ...rest } = row;
  formData = cloneDeep(rest);
};
const saveSubmit = (res: any) => {
  showDialog.value = false;
  if (res.data.ok) {
    ElMessage({
      message: res.data.message,
      type: "success",
    });
  }
  handleSearch();
};
const addProduct = () => {
  showDialog.value = true;
  title.value = "新增";
  formData = {};
};
const onLoopMenuClick = (index: number) => {};
// 单个商品删除
const singleDelete = async (row: any) => {
  if (!row || !row.id) {
    ElMessage.warning("商品信息无效");
    return;
  }

  try {
    await ElMessageBox.confirm(
      `确认删除商品"${row.pName}"吗？此操作不可逆！`,
      "删除确认",
      {
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "el-button--danger",
      }
    );

    // 验证商品是否有有效ID
    if (!row.id || typeof row.id !== "string") {
      ElMessage.error("商品数据无效，请刷新页面后重试");
      return;
    }

    const ids = [row.id];

    const res: any = await productApi.batchDeleteProducts({ ids });

    if (res.data && res.data.ok) {
      const deletedCount = res.data?.data?.deletedCount || 0;
      const deletedCartItems = res.data?.data?.deletedCartItems || 0;

      let message = res.data.message || `删除成功`;
      if (deletedCartItems > 0) {
        message += `，同时清理了 ${deletedCartItems} 个购物车记录`;
      }

      ElMessage.success(message);
      refreshTableInfo();
    } else {
      const errorMsg = res.data?.message || res.msg || "删除失败";
      ElMessage.error(`删除失败: ${errorMsg}`);
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败，请重试");
    }
  }
};
const cancelEvent = () => {};
</script>
<style scoped>
.w-100 {
  width: 200px;
  margin-right: 5px;
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.upload-container {
  padding: 20px;
}

.template-download {
  margin-top: 15px;
  text-align: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.upload-demo:hover {
  border-color: #409eff;
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 7px;
}

.green-button {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.green-button:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.batch-tip {
  background-color: #e1f3d8;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #67c23a;
  font-size: 14px;
}

.image-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.more-images {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.no-image {
  font-size: 12px;
  color: #999;
}

.batch-image-upload {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.batch-image-upload-demo {
  margin-bottom: 15px;
}

.uploaded-urls {
  margin-top: 15px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.uploaded-urls h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.url-tip {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.batch-image-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.duplicate-options {
  width: 100%;
  margin-bottom: 15px;
}

.duplicate-options .el-radio {
  margin-right: 20px;
  margin-bottom: 10px;
}

.duplicate-help {
  margin-bottom: 20px;
}

.duplicate-help .el-alert {
  margin: 0;
}

.product-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-name .name {
  font-weight: 500;
  color: #303133;
}

.product-name .type-tag {
  align-self: flex-start;
  font-size: 11px;
}
</style>
